<div class="main-container">
    <div class="half-wrap">
        <div class="card-wrap">
            <div class="card-content">
                <div class="content-title">
                    闸门示意图
                </div>
                <div class="main-wrap">
                    <!--<img src="./assets/images/gate/Bitmap.png" alt="">-->
                    <!--<div class="text-box after-box">-->
                    <!--闸后水位： {{data.heightDown}}m-->
                    <!--</div>-->
                    <!--<div class="text-box before-box">-->
                    <!--闸前水位： {{data.heightUp}}m-->
                    <!--</div>-->
                    <!--<div class="text-box degree-box">-->
                    <!--闸门开度： {{data.degree}}mm-->
                    <!--</div>-->
                    <div class="title">
                        <span>闸前水位: {{ data.heightUp || '-' }} m</span>
                        <span>闸后水位: {{ data.heightDown || '-' }} m</span>
                        <span>开度: {{ data.degree || '-' }} mm</span>
                    </div>
                    <div class="diagram-gate">
                        <img
                                class="gate-bg"
                                [src]="'./assets/images/map/monitor/gate-bg1.png'"
                                alt=""
                        />
                        <div class="gate-wrap gate-wrap1">
                            <div class="gate-box">
                                <div
                                        class="gate"
                                        [style.height]="(100 - (degreeDetail / gateHeight) * 100) + '%'"
                                ></div>
                                <img
                                        *ngIf="!degreeDetail"
                                        class="gate-dangban"
                                        src="./assets/images/map/monitor/dangban.png"
                                        alt=""
                                />
                                <img
                                        *ngIf="degreeDetail"
                                        class="gate-dangban"
                                        src="./assets/images/map/monitor/dangban1.png"
                                        alt=""
                                />
                            </div>
                        </div>
                        <div class="water-box water-box1">
                            <img [src]="'./assets/images/map/monitor/water1.png'" alt="" />
                            <div class="water water1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-wrap">
            <div class="card-content">
                <div class="content-title">
                    闸门信息和控制
                    <button class="temp-btn" nz-button nzType="primary" (click)="toggleHistoryContent()">{{ isHistoryContent ? '查看基本信息' : '查看控制记录' }}</button>
                </div>
                <div class="main-wrap">
                    <div class="main-info-wrap" *ngIf="!isHistoryContent;else historyTableContent">
                        <ul>
                            <li>
                                <span class="label">闸门开度</span>
                                <span class="value">{{data.degree}} mm</span>
                            </li>
                            <li><span class="label">闸前水位</span>
                                <span class="value">{{data.heightUp}} m</span></li>
                            <li><span class="label">当日水量</span>
                                <span class="value">-- m³</span></li>
                            <li><span class="label">采集时间</span>
                                <span class="value">{{data.ctCreatetime | date:'yyyy-MM-dd HH:mm:ss'}}</span></li>
                            <li><span class="label">当前控制方式</span>
                                <span class="value">远程</span></li>
                        </ul>
                        <ul>
                            <li><span class="label">瞬时流量</span>
                                <span class="value">{{data.flux}} m³/s</span></li>
                            <li><span class="label">闸后水位</span>
                                <span class="value">{{data.heightDown}} m</span></li>
                            <li><span class="label">累计水量</span>
                                <span class="value">{{data.totalFlux}} m³</span></li>
                            <li><span class="label">故障</span>
                                <span class="value">{{data.warnstatus}}</span></li>
                            <li><span class="label"></span>
                                <span class="value"></span></li>
                        </ul>
                        <div class="sub-box">
                            <div class="control-box">
                                <div class="control-item">
                                    <form nz-form [nzLayout]="'inline'" [formGroup]="flowCtrlForm">
                                        <nz-form-item>
                                            <nz-form-label>流量控制</nz-form-label>
                                            <nz-form-control>
                                                <nz-input-number formControlName="value" [nzStep]="1"></nz-input-number>
                                                m³/s
                                            </nz-form-control>
                                        </nz-form-item>
                                        <nz-form-item>
                                            <nz-form-label>控制时间</nz-form-label>
                                            <nz-form-control>
                                                <nz-input-number formControlName="controlTime" [nzMin]="2" [nzMax]="3200" [nzStep]="1"></nz-input-number>
                                                分钟
                                            </nz-form-control>
                                        </nz-form-item>
                                        <nz-form-item>
                                            <nz-form-control>
                                                <button nz-button nzType="primary" (click)="operateGate('model3')">启动</button>
                                            </nz-form-control>
                                        </nz-form-item>
                                    </form>
                                </div>
                                <nz-divider class="custom-divider"></nz-divider>
                                <div class="control-item">
                                    <form nz-form [nzLayout]="'inline'" [formGroup]="openingCtrlForm">
                                        <nz-form-item>
                                            <nz-form-label>开度控制</nz-form-label>
                                            <nz-form-control>
                                                <nz-input-number formControlName="value" [nzMin]="0" [nzStep]="1"></nz-input-number>
                                                mm
                                            </nz-form-control>
                                        </nz-form-item>
                                        <nz-form-item>
                                            <nz-form-label>控制时间</nz-form-label>
                                            <nz-form-control>
                                                <nz-input-number formControlName="controlTime" [nzMin]="2" [nzMax]="3200" [nzStep]="1"></nz-input-number>
                                                分钟
                                            </nz-form-control>
                                        </nz-form-item>
                                        <nz-form-item>
                                            <nz-form-control>
                                                <button nz-button nzType="primary" (click)="operateGate('model2')">启动</button>
                                            </nz-form-control>
                                        </nz-form-item>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <ng-template #historyTableContent>
                        <nz-table #historyTable
                                  class="main-table"
                                  [nzData]="historyTableData"
                                  [nzFrontPagination]="false"
                                  [(nzPageIndex)]="pageHistoryNum"
                                  [nzPageSize]="pageSize"
                                  (nzPageIndexChange)="queryHistoryInfo()"
                                  nzBordered
                                  nzSize="middle">
                            <thead>
                            <tr>
                                <th rowspan="2">闸门名称</th>
                                <th colspan="3">控制方式</th>
                                <th rowspan="2">操作人</th>
                                <th rowspan="2">操作时间</th>
                                <th rowspan="2">执行结果</th>
                            </tr>
                            <tr>
                                <th>开度</th>
                                <th>流量</th>
                                <th>水位</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr *ngFor="let data of historyTable.data">
                                <td>{{data.watergateCode}}</td>
                                <td>{{data.height}}</td>
                                <td>{{data.flow}}</td>
                                <td>{{data.level}}</td>
                                <td>{{data.name}}</td>
                                <td>{{data.uptime}}</td>
                                <td>{{data.success === '1' ? '成功' : '失败'}}</td>
                            </tr>
                            </tbody>
                        </nz-table>
                    </ng-template>
                </div>
            </div>
        </div>
    </div>
    <div class="half-wrap">
        <div class="card-wrap">
            <div class="card-content card-right-content">
                <nz-tabset [nzTabBarExtraContent]="tabTemplate">
                    <nz-tab nzTitle="水位、流量和开度过程线">
                        <div *ngIf="isChartContent;else waterTableContent">
                            <div echarts [options]="baseWaterChartOpt" [merge]="lineOpt1" class="chart"
                                 style="height: calc(23vh - 10px)"></div>
                            <div echarts [options]="baseFlowChartOpt" [merge]="lineOpt2" class="chart"
                                 style="height: calc(23vh - 10px)"></div>
                            <div echarts [options]="baseDegreeChartOpt" [merge]="lineOpt3" class="chart"
                                 style="height: calc(23vh - 10px)"></div>
                        </div>
                    </nz-tab>
                    <ng-template #waterTableContent>
                        <nz-table #waterTable
                                  nzBordered
                                  [nzData]="waterTableData"
                                  nzSize="small"
                                  [nzPageSize]="13"
                                  class="tab-water-table"
                                  (nzPageIndexChange)="getProcessListGate()">
                            <thead>
                            <tr>
                                <th>时间</th>
                                <th>闸前水位(m)</th>
                                <th>闸后水位(m)</th>
                                <th>流量(m³/s)</th>
                                <th>开度(mm)</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr *ngFor="let row of waterTable.data; let idx = index">
                                <td>{{ row.meaTime }}</td>
                                <td>{{ row.heightUp }}</td>
                                <td>{{ row.heightDown }}</td>
                                <td>{{ row.flux }}</td>
                                <td>{{ row.degree }}</td>
                            </tr>
                            </tbody>
                        </nz-table>
                    </ng-template>
                </nz-tabset>
                <ng-template #tabTemplate>
                    <nz-range-picker class="tab-date-picker" [nzRanges]="tabRange" [(ngModel)]="tabDateRange" (ngModelChange)="onTabDateChange($event)"></nz-range-picker>
                    <button class="tab-extra-btn" nz-button nzType="primary" (click)="toggleTabContent()">{{ isChartContent ? '列表' : '图表' }}</button>
                </ng-template>
            </div>
        </div>
    </div>

    <!--<div class="card-wrap">-->
        <!--<div class="card-content">-->
            <!--<div class="content-title">-->
                <!--闸门控制-->
            <!--</div>-->
            <!--<div class="main-wrap">-->
                <!--<div class="main-info-wrap">-->
                    <!--&lt;!&ndash;<div class="control-box">&ndash;&gt;-->
                        <!--&lt;!&ndash;<div class="control-item">&ndash;&gt;-->
                            <!--&lt;!&ndash;<form nz-form [nzLayout]="'inline'" [formGroup]="flowCtrlForm">&ndash;&gt;-->
                                <!--&lt;!&ndash;<nz-form-item>&ndash;&gt;-->
                                    <!--&lt;!&ndash;<nz-form-label>流量控制</nz-form-label>&ndash;&gt;-->
                                    <!--&lt;!&ndash;<nz-form-control>&ndash;&gt;-->
                                        <!--&lt;!&ndash;<nz-input-number formControlName="value" [nzStep]="1" [nzParser]="parserFlow" [nzFormatter]="formatterFlow"></nz-input-number>&ndash;&gt;-->
                                    <!--&lt;!&ndash;</nz-form-control>&ndash;&gt;-->
                                <!--&lt;!&ndash;</nz-form-item>&ndash;&gt;-->
                                <!--&lt;!&ndash;<nz-form-item>&ndash;&gt;-->
                                    <!--&lt;!&ndash;<nz-form-label>控制时间</nz-form-label>&ndash;&gt;-->
                                    <!--&lt;!&ndash;<nz-form-control>&ndash;&gt;-->
                                        <!--&lt;!&ndash;<nz-input-number formControlName="controlTime" [nzMin]="2" [nzMax]="3200" [nzStep]="1" [nzParser]="parserMinutes" [nzFormatter]="formatterMinutes"></nz-input-number>&ndash;&gt;-->
                                    <!--&lt;!&ndash;</nz-form-control>&ndash;&gt;-->
                                <!--&lt;!&ndash;</nz-form-item>&ndash;&gt;-->
                                <!--&lt;!&ndash;<nz-form-item>&ndash;&gt;-->
                                    <!--&lt;!&ndash;<nz-form-control>&ndash;&gt;-->
                                        <!--&lt;!&ndash;<button nz-button nzType="primary" (click)="operateGate('model3')">启动</button>&ndash;&gt;-->
                                    <!--&lt;!&ndash;</nz-form-control>&ndash;&gt;-->
                                <!--&lt;!&ndash;</nz-form-item>&ndash;&gt;-->
                            <!--&lt;!&ndash;</form>&ndash;&gt;-->
                        <!--&lt;!&ndash;</div>&ndash;&gt;-->
                        <!--&lt;!&ndash;<nz-divider></nz-divider>&ndash;&gt;-->
                        <!--&lt;!&ndash;<div class="control-item">&ndash;&gt;-->
                            <!--&lt;!&ndash;<form nz-form [nzLayout]="'inline'" [formGroup]="openingCtrlForm">&ndash;&gt;-->
                                <!--&lt;!&ndash;<nz-form-item>&ndash;&gt;-->
                                    <!--&lt;!&ndash;<nz-form-label>开度控制</nz-form-label>&ndash;&gt;-->
                                    <!--&lt;!&ndash;<nz-form-control>&ndash;&gt;-->
                                        <!--&lt;!&ndash;<nz-input-number formControlName="value" [nzMin]="0" [nzStep]="1" [nzParser]="parserMM" [nzFormatter]="formatterMM"></nz-input-number>&ndash;&gt;-->
                                    <!--&lt;!&ndash;</nz-form-control>&ndash;&gt;-->
                                <!--&lt;!&ndash;</nz-form-item>&ndash;&gt;-->
                                <!--&lt;!&ndash;<nz-form-item>&ndash;&gt;-->
                                    <!--&lt;!&ndash;<nz-form-label>控制时间</nz-form-label>&ndash;&gt;-->
                                    <!--&lt;!&ndash;<nz-form-control>&ndash;&gt;-->
                                        <!--&lt;!&ndash;<nz-input-number formControlName="controlTime" [nzMin]="2" [nzMax]="3200" [nzStep]="1" [nzParser]="parserMinutes" [nzFormatter]="formatterMinutes"></nz-input-number>&ndash;&gt;-->
                                    <!--&lt;!&ndash;</nz-form-control>&ndash;&gt;-->
                                <!--&lt;!&ndash;</nz-form-item>&ndash;&gt;-->
                                <!--&lt;!&ndash;<nz-form-item>&ndash;&gt;-->
                                    <!--&lt;!&ndash;<nz-form-control>&ndash;&gt;-->
                                        <!--&lt;!&ndash;<button nz-button nzType="primary" (click)="operateGate('model2')">启动</button>&ndash;&gt;-->
                                    <!--&lt;!&ndash;</nz-form-control>&ndash;&gt;-->
                                <!--&lt;!&ndash;</nz-form-item>&ndash;&gt;-->
                            <!--&lt;!&ndash;</form>&ndash;&gt;-->
                        <!--&lt;!&ndash;</div>&ndash;&gt;-->
                    <!--&lt;!&ndash;</div>&ndash;&gt;-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
</div>
